<!-- 模板 -->
<template>
  <div class="home">
    <!-- 下拉刷新组件，要包裹所有的页面元素 -->
    <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh"
      success-text="刷新成功"
      pulling-text
    >
      <!-- 0、开头的logo -->
      <van-row class="header-warp">
        <van-col span="24">
          <img :src="logo" alt="" class="logo" />
          <van-icon name="user-circle-o" size="0.6rem" @click="goLogin" />
        </van-col>
      </van-row>
      <!-- 1、事件列表导航 -->
      <van-swipe
        class="my-swipe wow flipInX"
        :autoplay="3000"
        indicator-color="white"
      >
        <van-swipe-item v-for="(item, index) in eventList" :key="index">
          <img :src="item.img" alt="" width="100%" />
        </van-swipe-item>
      </van-swipe>
      <!-- 2、中间的分类信息 -->
      <van-grid
        class="wow bounceInLeft"
        :column-num="4"
        icon-size="1.4rem"
        :border="false"
        clickable
      >
        <van-grid-item
          v-for="(item, index) in cateList"
          :key="index"
          :icon="item.img"
          :text="item.name"
          replace
          to="/"
        />
      </van-grid>
      <!-- 3、案例列表 -->
      <van-row>
        <van-col span="24" class="title"> 推荐介绍 </van-col>
      </van-row>
      <van-row>
        <!-- <p>刷新次数: {{ count }}</p>  :class="[
            'animated',
            index % 2 === 0 ? 'bounceInLeft' : 'bounceInRight',
          ]" class="animated fadeInUp"-->
        <van-col
          span="12"
          class="animated fadeInUp"
          v-for="(item, index) in caseList"
          :key="index"
        >
          <!-- 上面的图 -->
          <van-row>
            <!-- <img
              width="100%"
              style="height: 1.8rem"
              fit="contain"
              class="van-image"
              v-lazy="item.img"
            /> -->
            <van-image
              style="height: 1.8rem; width: 100%"
              :src="item.img"
              lazy-load
            />
          </van-row>
          <!-- 下面的介绍 评分 -->
          <van-row class="intr">
            <van-col span="15" class="case-name">{{ item.name }}</van-col>
            <van-col span="9"
              ><van-rate
                v-model="item.like"
                icon="like"
                void-icon="like-o"
                :size="size"
                :count="3"
            /></van-col>
          </van-row>
        </van-col>
      </van-row>
    </van-pull-refresh>
    <!-- 4、底部的导航 -->
    <Tabbar :active="0"></Tabbar>
  </div>
</template>

<script>
import { request } from '../utils/request'
import lazy from '../assets/img/nz.jpg'
import logo from '../assets/img/logo.png'
import Tabbar from './Tabbar.vue'

export default {
  name: '',
  data() {
    return {
      logo,
      eventList: [],
      cateList: [],
      caseList: [],
      page: 1,
      rows: 10,
      total: 0,
      value: 2,
      size: '0.24rem',
      totalPage: 0,
      lazy,
      isLoading: false,
      wow: null,
    }
  },
  components: {
    Tabbar,
  },
  methods: {
    //回到登录
    goLogin() {
      sessionStorage.clear()
      this.$router.push('/')
    },
    //下拉刷新
    onRefresh() {
      this.isLoading = false
      this.$toast('刷新结束')
      this.page = 1
      this.caseList = []
      this.total = 0
      this.totalPage = 0
      this.getCaseList()
      this.getEventList()
      this.getCateList()
    },
    async getCaseList() {
      let { data: res } = await request({
        url: 'case',
        type: 'get',
        data: { page: this.page, rows: this.rows },
      })
      console.log(res)
      if (res.code !== 200) {
        return this.$toast.fail(res.code)
      }
      let arr = JSON.parse(JSON.stringify(res.data.list))
      arr.forEach(function (item) {
        item.like = Math.floor(Math.random() * 3) + 1
      })
      this.caseList = [...this.caseList, ...arr]
      this.total = res.data.count
      this.totalPage = Math.ceil(this.total / this.rows)
    },
    //获得获得列表
    async getEventList() {
      let { data: res } = await request({ url: 'event', type: 'get' })
      console.log(res)
      if (res.code !== 200) {
        return this.$toast.fail(res.code)
      }
      this.eventList = res.data.list
    },
    //获得分类列表
    async getCateList() {
      let { data: res } = await request({ url: 'cate', type: 'get' })
      console.log(res)
      if (res.code !== 200) {
        return this.$toast.fail(res.code)
      }
      this.cateList = res.data.cateList
    },
    windowScroll() {
      // 滚动条距离页面顶部的距离
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
      //获得视口高度
      let clientHeight = document.documentElement.clientHeight
      //获得文档的高度
      let docHeight = parseInt(
        getComputedStyle(document.documentElement, null).height
      )
      console.log(scrollTop, clientHeight, docHeight)

      if (clientHeight + scrollTop >= docHeight) {
        if (this.page >= this.totalPage) {
          return this.$toast('最后一页')
        }
        this.page++
        this.getCaseList()
      }
    },
  },
  created() {
    this.getEventList()
    this.getCateList()
    this.getCaseList()
  },
  mounted() {
    window.addEventListener('scroll', this.windowScroll, true)
    let _this = this
    //页面渲染结束再执行动画
    this.$nextTick(() => {
      let wow = new _this.WOW({
        live: false,
      })
      wow.init()
    })
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.windowScroll, true)
    console.log('beforeDestroy home')
  },
  watch: {
    //监听data中caseList的变化，变化时就执行操作
    //caseList() {
    // let _this = this
    // this.$nextTick(() => {
    //   // 在dom渲染完后,再执行动画
    //   _this.wow = new _this.WOW({
    //     live: false,
    //   })
    //   wow.init()
    // })
    //this.wow.init()
    //},
  },
}
</script>

<style lang="less" scoped>
.header-warp {
  .van-col {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.logo {
  width: 1.5rem;
  animation: heartBt 2s linear infinite;
}
.home {
  margin-bottom: 1.3rem;
  background: #e6e4e4;
}
.van-col {
  padding: 0.1rem;
}
.title {
  color: #646566;
  font-weight: 700;
}
.intr {
  font-size: 0.3rem;
  background-color: #fff;
  color: #646566;
}
.case-name {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.van-icon {
  color: #646566;
}
</style>
